<!DOCTYPE html>
<html>
<head>
<title>Path Tester</title>
<meta name="viewport" 
      content="width=device-width, initial-scale=1">	
<link rel="stylesheet" 
      href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" 
        src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" 
        src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>

<body>

<div data-role="page" id="third">

	<div data-role="header">
		<h1>Test</h1>
	</div>
	
	<div role="main" class="ui-content">

		<form>

		<div data-role="fieldcontain">
		    <label for="isabsurl">Is Absolute URL?</label>
		    <input type="text" name="isabsurl" id="isabsurl" value=""  />
			<div id="isabsurlresult"></div>
		</div>	

		<div data-role="fieldcontain">
		    <label for="isrelurl">Is Relative URL?</label>
		    <input type="text" name="isrelurl" id="isrelurl" value=""  />
			<div id="isrelurlresult"></div>
		</div>	

		<div data-role="fieldcontain">
		    <label for="makeurl">Make URL Absolute</label>
		    <input type="text" name="makeurl" id="makeurl" 
			value="" placeholder="Relative URL" />
		    <input type="text" name="makeurl2" id="makeurl2" 
			value="" placeholder="Absolute URL" />
			<div id="makeurlresult"></div>
		</div>	

		<div data-role="fieldcontain">
		    <label for="pathget">Path Get</label>
		    <input type="text" name="pathget" id="pathget" value=""  />
			<div id="pathgetresult"></div>
		</div>	

		</form>
	</div>

</div>

<script>
$("#isabsurl").keyup(function() {
	var thisVal = $(this).val();
	var isAbsUrl = $.mobile.path.isAbsoluteUrl(thisVal);
	$("#isabsurlresult").text(isAbsUrl);
});

$("#isrelurl").keyup(function() {
	var thisVal = $(this).val();
	var isRelUrl = $.mobile.path.isRelativeUrl(thisVal);
	$("#isrelurlresult").text(isRelUrl);
});

$("#makeurl,#makeurl2").keyup(function() {
	var urlVal1 = $("#makeurl").val();
	var urlVal2 = $("#makeurl2").val();
	var makeUrlResult = $.mobile.path.makeUrlAbsolute(urlVal1,urlVal2);
	$("#makeurlresult").text(makeUrlResult);
});

$("#pathget").keyup(function() {
	var thisVal = $(this).val();
	var path = $.mobile.path.get(thisVal);
	$("#pathgetresult").html(path);
});

</script>

</body>
</html>
